<template>
  <div>
    <van-nav-bar fixed placeholder>
      <template #left>
        <van-tabs v-model="active" color="#000000" @change="onArticleChange">
          <van-tab title="推荐"></van-tab>
          <van-tab title="最新"></van-tab>
        </van-tabs>
      </template>
      <template #right>
        <span class="right-logo">面经</span>
      </template>
    </van-nav-bar>

    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="loadMore">
      <article-item v-for="item in articleList" :key="item.id" :articleList="item"></article-item>
    </van-list>
  </div>
</template>

<script>
import { getInterviewQuery } from '../api/article'
export default {
  data() {
    return {
      active: 0,
      current: 1,
      articleList: [],
      loading: true,
      finished: false,
    }
  },
  created() {
    this.loadArticleList()
  },
  methods: {
    // 多处要加载列表数据, 将获取列表数据封装成方法
    async loadArticleList() {
      const res = await getInterviewQuery({
        // 第几页
        current: this.current,
        // 排序
        // 接口说明 说明：排序字段，以字段名加下划线组合，不能有特殊字符和不存在的字段。 推荐传 weight_desc 最新：可以不用传
        sorter: this.active === 0 ? 'weight_desc' : ''
      })
      console.log('ac', res.data.data);
      if (this.current === 1) {
        this.articleList = res.data.data.rows
      }
      else {
        // 拼接数组
        this.articleList = [...this.articleList, ...res.data.data.rows]
      }
      // 判断是否有更多的数据
      this.finished = this.current >= res.data.data.pageTotal
      console.log(this.articleList);
      this.loading = false // 关闭加载
    },
    loadMore() {
      this.current++
      this.loadArticleList()
    },
    onArticleChange() {
      this.current = 1
      this.loadArticleList()
    }
  }
}
</script>

<style>
.right-logo {
  color: #fa6d1e;
  font-weight: 900;
  font-size: 24px;
}
</style>